<template>
  <div class="login">
    <div class="icon">
      <img src="~assets/img/logoicon.png" alt="" />
    </div>
    <van-form @submit="onSubmit" validate-trigger="onSubmit">
      <van-field v-model="username" name="username" label="手机号" placeholder="手机号" />
      <!-- :rules="[
          { required: true, message: '请填写手机号' },
          { validator: usernameValidator, message: '请输入正确手机号' }
        ]" -->
      <van-field v-model="password" type="password" name="password" label="密码" placeholder="密码" />
      <!-- :rules="[
          { required: true, message: '请填写密码' },
          { validator: passwordValidator, message: '密码至少包含 数字和英文，长度6-20' }
        ]" -->
      <div style="margin: 16px">
        <van-button block type="warning" native-type="submit">登录</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'Login',
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    ...mapMutations(['tabBarShow', 'tabBarHide']),
    ...mapActions('loginModule', ['getLoginInfo']),
    onSubmit(values) {
      this.getLoginInfo(values)
    },
    usernameValidator(val) {
      return /^1[3456789]\d{9}$/.test(val)
    },
    passwordValidator(val) {
      return /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(val)
    }
  },
  created() {
    this.tabBarHide()
  },
  beforeDestroy() {
    this.tabBarShow()
  }
}
</script>

<style lang="scss" scoped>
.login {
  height: 100vh;
  background: #fff;
  .icon {
    text-align: center;
    img {
      height: 0.6rem;
      width: 0.6rem;
      margin: 0.79rem auto 0.4rem;
      line-height: 0.6rem;
    }
  }
  .van-button {
    margin-top: 0.6rem;
  }
}
</style>